<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        #web div ul{
            float: left;
            width:90px ;
            height: 200px;
            border:1px solid #cccccc;
            overflow: auto;
        }
        li{
            width:100%;
            height: 36px;
        }
        li:hover{
            background-color: #1E87f2;
        }
        li.active{
            background: red;
        }
    </style>
</head>
<body>
<div id="web">
    <input type="text" value="" placeholder="请选择日期" readonly>
    <div>
        <ul class="first">
        </ul>
        <ul class="second">
        </ul>
        <ul class="third">
        </ul>
    </div>
</div>
</body>

<script type="text/javascript" src="../../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.nicescroll.js"></script>
<script type="text/javascript">
    var $list = $('.first');

    var newyear = new Date().getFullYear();


    for(var i = 1970;i<=newyear;i++){
        $list.append('<li>'+i+'</li>');
    }
    for(var i = 1;i<=12;i++){
        $('.second').append('<li>'+i+'</li>');
    }

    $list.scroll(function () {
        console.log($(this).scrollTop());

    })

    //滚动条 初始时位于
    $list.scrollTop($list[0].scrollHeight);

    var liste = $('.first li');
    var year , mouth;
    $('.second li').click(function () {
        $('.second li').removeClass('active');
        $(this).addClass('active');
        mouth = $(this).index()+1;

        for(var i = 0;i<liste.length;i++){
            if(liste.eq(i).hasClass('active')){
                year = liste.eq(i).text();
                break;
            }
        }
        for(var i = 1;i<=dayNum(year,mouth);i++){
            $('.third').append('<li>'+i+'</li>');
        }

        var num = $('.first li').height()*40;


        console.log($list[0].scrollHeight);
    })

    $('.first li').click(function () {
        $('.first li').removeClass('active');
        $(this).addClass('active');
    })

    var day ;
    function dayNum(year,mouth){
        var cond1 = year % 4 == 0;  //条件1：年份必须要能被4整除
        var cond2 = year % 100 != 0;  //条件2：年份不能是整百数
        var cond3 = year % 400 ==0;  //条件3：年份是400的倍数
        var cond = (cond1 && cond2) || cond3;
        if(mouth==1||mouth==3||mouth==5||mouth==7||mouth==8||mouth==10||mouth==12){
            day = 31;
        }
        if(mouth==4||mouth==6||mouth==9||mouth==11){
            day = 30;
        }
        console.log(cond,cond,cond2,cond3);
        if(cond){
            if(mouth==2){
                day = 29;
            }
        }else{
            if(mouth==2){
                day = 28;
            }
        }
        return day;
    }

</script>
</html>